.stepButtons {
  @width: 400px;
  @height: 80px;
  @margin: 15px;
  position: absolute;
  bottom: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: @width+(@height+@margin*2)*2;
  height: @height+@margin*2;
  .animation;
  &.open {
    bottom: 50px;
  }
  .stepButton {
    opacity: 0.8;
    cursor: pointer;
    .abs;
    margin: 15px;
    width: @height;
    height: @height;
    background-size: cover;
    background-repeat: no-repeat;
    .animation;
    &.next {
      background-image: url("../img/player/next.png");
      right: 0;
    }
    &.previous {
      background-image: url("../img/player/previous.png");
      left: 0;
    }
    &:hover {
      opacity: 1;
    }
    &.disabled {
      opacity: 0.3 !important;
      cursor: default;
    }
  }
  .timeline {
    position: absolute;
    width: @width+(@height+@margin*2)*2;
    height: @height+@margin*2;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: @height;
    .line {
      .abs;
      width: @width;
      height: 2px;
      left: @height+@margin*2;
      top: (@height+@margin*2)/2 - 1;
      background-color: rgba(255, 255, 255, .3);
      cursor: default;
    }
    .timenode {
      .abs;
      top: (@height+@margin*2)/2;
      overflow: visible;
      cursor: pointer;
      .node {
        width: 10px;
        height: 10px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 10px;
        .abs;
        transform: translateX(-50%) translateY(-50%);
        .animation;
      }
      .text {
        transform: translateX(-50%) translateY(-100%);
        .tac;
        font-size: 16px;
        color: @color-white;
        padding-bottom: 10px;
      }
      &.active {
        .node {
          width: 20px;
          height: 20px;
          background-color: rgb(255, 204, 0);
        }
        .text {
          font-size: 24px;
          color: rgb(255, 204, 0);
          padding-bottom: 15px;
        }
      }
      &.node1 {
        left: @height+@margin*2 + @width/5*1;
      }
      &.node2 {
        left: @height+@margin*2 + @width/5*2;
      }
      &.node3 {
        left: @height+@margin*2 + @width/5*3;
      }
      &.node4 {
        left: @height+@margin*2 + @width/5*4;
      }
    }
  }
}